<template>
	<view style="position: relative;height: 80upx;display: flex;align-items: center;">
		<view style="display: flex;align-items: center;">
			<input type="text" @focus="mfocus" @blur = "mblur" @input="input" v-model="text" style="line-height: 80upx;">
		</view>
		<view v-if="!!show" class="scrollBox">
			<view class="" v-for="(item,index) in data" :key="index" @tap="clickItem(item)" style="overflow: hidden;">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			dataList: {
				type: Array,
				default: function() {
					return []
				}
			},
			mtext: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				show:false,
				data:this.dataList,
				fitterData:[],
				text:this.mtext,
				obj:{}
			}
		},
		onLoad() {
			
		},
		mounted() {
			this.fitterData = JSON.parse(JSON.stringify(this.data))
		},
		methods: {
			mfocus() {
				this.show = true
				this.data = this.data.filter(val => {
					if(JSON.stringify(val).indexOf(this.text) != -1) {
						return val
					}
				})
			},
			mblur() {
				console.log(this.text)
				if(this.text == '') {
					this.obj = {}
				}
				setTimeout(() => {
					this.show = false
					this.$emit('chooseItem',this.obj)
				},200)
			},
			input() {
				if(!this.text) {
					this.data = JSON.parse(JSON.stringify(this.fitterData))
				}else {
					this.data = this.fitterData.filter(val => {
						if(JSON.stringify(val).indexOf(this.text) != -1) {
							return val
						}
					})
				}
			},
			clickItem(item) {
				this.text = item.name
				this.obj = item
				this.show = false
				
			}
		}
	}
</script>

<style>
.scrollBox {
	position: absolute;
	top: 65upx;
	z-index: 22222;
	width: 400upx;
	height: 300upx;
	border: 1px solid #ccc;
	background-color: #fff;
	overflow: auto;
	left: -80upx;
}
.scrollBox view {
	height: 70upx;
	border-bottom: 1px solid #CCCCCC;
	text-align: center;
	line-height: 70upx;
}
</style>
